<!-- 富文本编辑器  import UEditor from '@/components/UEditor'  -->
<template>
  <div class="ue-ditor" ref="ueditor"></div>
</template>

<script>
import EUditor from 'wangeditor'
export default {
  name: 'UEditor',
  components: {},
  data () {
    return {
      editor: null,
      editorContent: '',
      menuList: [
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'emoticon', // 表情
        'image', // 插入图片
        'table', // 表格
        'video', // 插入视频
        'code', // 插入代码
        'undo', // 撤销
        'redo' // 重复
      ]
    }
  },
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  watch: {},
  computed: {},
  mounted () {
    this.init()
  },
  methods: {
    init () {
      let that = this
      that.editorContent = this.value
      that.editor = new EUditor(this.$refs.ueditor)
      that.editor.customConfig.menus = this.menuList

      that.editor.customConfig.onchange = function (html) {
        // html 即变化之后的内容
        that.emitContent(html)
      }
      that.editor.create()
      that.editor.txt.html(that.editorContent)
    },
    emitContent (val) {
      this.$emit('input', val)
    }
  },
  beforeDestroy () {
    if (this.editor !== null && this.editor.destroy) {
      this.editor.destroy()
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
